<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧题库 - 教育资源聚合平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
            }
            .progress-ring-circle {
                transition: stroke-dashoffset 0.35s;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <a href="#" class="flex items-center">
                    <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                    <h1 class="text-xl font-bold text-gray-800">智慧题库</h1>
                </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">教材版本</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">统计分析</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">系统设置</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索题目、知识点或教材..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">5</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
        <div class="container mx-auto">
            <!-- 欢迎横幅 -->
            <div class="bg-gradient-primary rounded-2xl p-6 md:p-8 mb-8 text-white relative overflow-hidden">
                <div class="absolute top-0 right-0 opacity-10">
                    <i class="fa fa-graduation-cap text-[150px] transform rotate-12"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2 text-shadow">欢迎回来，张老师</h2>
                <p class="text-white/90 max-w-2xl mb-6">今天是星期四，7月3日。您有5个待处理的通知和3个待审核的题目。</p>
                <div class="flex flex-wrap gap-4">
                    <button class="px-5 py-2 bg-white text-primary rounded-lg hover:bg-gray-100 transition-colors font-medium">
                        <i class="fa fa-plus mr-1"></i> 添加新题目
                    </button>
                    <button class="px-5 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors font-medium">
                        <i class="fa fa-book mr-1"></i> 浏览教材
                    </button>
                    <button class="px-5 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors font-medium">
                        <i class="fa fa-line-chart mr-1"></i> 查看统计
                    </button>
                </div>
            </div>
            
            <!-- 数据概览 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-gray-500 font-medium">总题目数</h3>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                            <i class="fa fa-question-circle"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <p class="text-3xl font-bold">12,847</p>
                            <p class="text-green-500 text-sm flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 较上周增长 8.2%
                            </p>
                        </div>
                        <div class="w-16 h-16">
                            <svg class="w-full h-full" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E2E8F0" stroke-width="3"></circle>
                                <circle class="progress-ring-circle" cx="18" cy="18" r="16" fill="none" stroke="#165DFF" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="25"></circle>
                                <text x="18" y="20" class="text-xs font-bold text-center" text-anchor="middle" fill="#165DFF">75%</text>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-gray-500 font-medium">本周新增</h3>
                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-plus-circle"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <p class="text-3xl font-bold">328</p>
                            <p class="text-green-500 text-sm flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 较上周增长 12.5%
                            </p>
                        </div>
                        <div class="w-16 h-16">
                            <svg class="w-full h-full" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E2E8F0" stroke-width="3"></circle>
                                <circle class="progress-ring-circle" cx="18" cy="18" r="16" fill="none" stroke="#00B42A" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="40"></circle>
                                <text x="18" y="20" class="text-xs font-bold text-center" text-anchor="middle" fill="#00B42A">60%</text>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-gray-500 font-medium">待审核</h3>
                        <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                            <i class="fa fa-clock-o"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <p class="text-3xl font-bold">47</p>
                            <p class="text-red-500 text-sm flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 较上周增长 3.2%
                            </p>
                        </div>
                        <div class="w-16 h-16">
                            <svg class="w-full h-full" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E2E8F0" stroke-width="3"></circle>
                                <circle class="progress-ring-circle" cx="18" cy="18" r="16" fill="none" stroke="#FF7D00" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="90"></circle>
                                <text x="18" y="20" class="text-xs font-bold text-center" text-anchor="middle" fill="#FF7D00">10%</text>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-gray-500 font-medium">使用次数</h3>
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                            <i class="fa fa-fire"></i>
                        </div>
                    </div>
                    <div class="flex items-end justify-between">
                        <div>
                            <p class="text-3xl font-bold">8,521</p>
                            <p class="text-green-500 text-sm flex items-center mt-1">
                                <i class="fa fa-arrow-up mr-1"></i> 较上周增长 15.7%
                            </p>
                        </div>
                        <div class="w-16 h-16">
                            <svg class="w-full h-full" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E2E8F0" stroke-width="3"></circle>
                                <circle class="progress-ring-circle" cx="18" cy="18" r="16" fill="none" stroke="#722ED1" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="65"></circle>
                                <text x="18" y="20" class="text-xs font-bold text-center" text-anchor="middle" fill="#722ED1">35%</text>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近使用的教材和热门知识点 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- 最近使用的教材 -->
                <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2">
                    <div class="flex items-center justify-between mb-5">
                        <h3 class="font-bold text-lg">最近使用的教材</h3>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                                <i class="fa fa-book text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium">人教版 数学 高中一年级 上册</h4>
                                <p class="text-sm text-gray-500">上次使用：今天 10:23</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">数学</span>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mr-4">
                                <i class="fa fa-book text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium">人教版 物理 高中二年级 下册</h4>
                                <p class="text-sm text-gray-500">上次使用：昨天 15:47</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 bg-green-100 text-green-600 rounded text-xs">物理</span>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                                <i class="fa fa-book text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium">北师大版 化学 高中一年级 全一册</h4>
                                <p class="text-sm text-gray-500">上次使用：3天前 09:12</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">化学</span>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center text-red-600 mr-4">
                                <i class="fa fa-book text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium">人教版 生物 高中二年级 上册</h4>
                                <p class="text-sm text-gray-500">上次使用：5天前 14:35</p>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs">生物</span>
                                <i class="fa fa-angle-right text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门知识点 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <div class="flex items-center justify-between mb-5">
                        <h3 class="font-bold text-lg">热门知识点</h3>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-center justify-between mb-1">
                                <h4 class="font-medium">集合的定义</h4>
                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">128次</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-center justify-between mb-1">
                                <h4 class="font-medium">函数的单调性</h4>
                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">112次</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                        
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-center justify-between mb-1">
                                <h4 class="font-medium">牛顿第二定律</h4>
                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">98次</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 66%"></div>
                            </div>
                        </div>
                        
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-center justify-between mb-1">
                                <h4 class="font-medium">化学平衡</h4>
                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">87次</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 58%"></div>
                            </div>
                        </div>
                        
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-center justify-between mb-1">
                                <h4 class="font-medium">DNA的结构</h4>
                                <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">76次</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 51%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 题目类型统计和最近添加的题目 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- 题目类型统计 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <div class="flex items-center justify-between mb-5">
                        <h3 class="font-bold text-lg">题目类型分布</h3>
                        <div class="relative">
                            <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 focus:outline-none focus:ring-1 focus:ring-primary text-sm">
                                <option>全部学科</option>
                                <option>数学</option>
                                <option>物理</option>
                                <option>化学</option>
                                <option>生物</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                        </div>
                    </div>
                    
                    <div class="h-64">
                        <canvas id="questionTypeChart"></canvas>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-3 mt-4">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                            <span class="text-sm text-gray-600">单选题</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                            <span class="text-sm text-gray-600">多选题</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
                            <span class="text-sm text-gray-600">判断题</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                            <span class="text-sm text-gray-600">填空题</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                            <span class="text-sm text-gray-600">解答题</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
                            <span class="text-sm text-gray-600">其他</span>
                        </div>
                    </div>
                </div>
                
                <!-- 最近添加的题目 -->
                <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2">
                    <div class="flex items-center justify-between mb-5">
                        <h3 class="font-bold text-lg">最近添加的题目</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors text-sm">
                                <i class="fa fa-refresh mr-1"></i> 刷新
                            </button>
                            <button class="px-3 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                                <i class="fa fa-plus mr-1"></i> 添加
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="text-left text-gray-500 text-sm border-b">
                                    <th class="pb-3 font-medium">题目</th>
                                    <th class="pb-3 font-medium">类型</th>
                                    <th class="pb-3 font-medium">学科</th>
                                    <th class="pb-3 font-medium">难度</th>
                                    <th class="pb-3 font-medium">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b hover:bg-gray-50 transition-colors">
                                    <td class="py-3 pr-4 max-w-xs truncate">
                                        <div class="font-medium">已知集合\(A = \{1, 2, 3\}\)，集合\(B = \{2, 3, 4\}\)，求\(A \cap B\)。</div>
                                        <div class="text-xs text-gray-500 mt-1">张老师 · 今天 10:23</div>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">单选题</span>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">数学</span>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center">
                                            <div class="flex items-center mr-2">
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">中等</span>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-gray-700">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr class="border-b hover:bg-gray-50 transition-colors">
                                    <td class="py-3 pr-4 max-w-xs truncate">
                                        <div class="font-medium">简述牛顿第二定律的内容及其数学表达式。</div>
                                        <div class="text-xs text-gray-500 mt-1">李老师 · 今天 09:15</div>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-green-100 text-green-600 rounded text-xs">解答题</span>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">物理</span>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center">
                                            <div class="flex items-center mr-2">
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">较难</span>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-gray-700">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr class="border-b hover:bg-gray-50 transition-colors">
                                    <td class="py-3 pr-4 max-w-xs truncate">
                                        <div class="font-medium">下列哪种物质属于有机物？</div>
                                        <div class="text-xs text-gray-500 mt-1">王老师 · 昨天 16:42</div>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">单选题</span>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs">化学</span>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center">
                                            <div class="flex items-center mr-2">
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">容易</span>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-gray-700">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                





                                <tr class="border-b hover:bg-gray-50 transition-colors">
                                    <td class="py-3 pr-4 max-w-xs truncate">
                                        <div class="font-medium">DNA分子的基本组成单位是什么？它们是如何连接形成DNA链的？</div>
                                        <div class="text-xs text-gray-500 mt-1">赵老师 · 昨天 14:35</div>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded text-xs">填空题</span>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-green-100 text-green-600 rounded text-xs">生物</span>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center">
                                            <div class="flex items-center mr-2">
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">很难</span>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-gray-700">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="py-3 pr-4 max-w-xs truncate">
                                        <div class="font-medium">已知二次函数\(f(x) = ax^2 + bx + c\)的图像经过点\((1, 2)\)，\((-1, 6)\)，且对称轴为\(x = 1\)，求\(a\)，\(b\)，\(c\)的值。</div>
                                        <div class="text-xs text-gray-500 mt-1">张老师 · 3天前 09:12</div>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs">解答题</span>
                                    </td>
                                    <td class="py-3">
                                        <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">数学</span>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex items-center">
                                            <div class="flex items-center mr-2">
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star text-yellow-400 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                                <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">较难</span>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80">
                                                <i class="fa fa-trash-o"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-gray-700">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="mt-4 flex items-center justify-between">
                        <div class="text-sm text-gray-500">显示 1-5 条，共 12,847 条</div>
                        <div class="flex space-x-1">
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:border-primary hover:text-primary disabled:opacity-50" disabled>
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:border-primary hover:text-primary">2</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:border-primary hover:text-primary">3</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:border-primary hover:text-primary">
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统公告和即将截止的任务 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 系统公告 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <div class="flex items-center justify-between mb-5">
                        <h3 class="font-bold text-lg">系统公告</h3>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3 flex-shrink-0">
                                    <i class="fa fa-bullhorn"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">系统升级通知</h4>
                                    <p class="text-sm text-gray-600 mt-1">系统将于7月5日22:00-次日02:00进行升级维护，届时将无法访问，请提前做好准备。</p>
                                    <div class="flex items-center text-xs text-gray-500 mt-2">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>2025-07-01</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3 flex-shrink-0">
                                    <i class="fa fa-check-circle"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">新功能上线</h4>
                                    <p class="text-sm text-gray-600 mt-1">知识点关联功能已正式上线，支持多维度关联和知识网络可视化，欢迎体验！</p>
                                    <div class="flex items-center text-xs text-gray-500 mt-2">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>2025-06-28</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3 flex-shrink-0">
                                    <i class="fa fa-exclamation-circle"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">数据备份提醒</h4>
                                    <p class="text-sm text-gray-600 mt-1">请定期进行数据备份，系统每周日凌晨1:00将自动进行全量备份。</p>
                                    <div class="flex items-center text-xs text-gray-500 mt-2">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>2025-06-25</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 即将截止的任务 -->
                <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2">
                    <div class="flex items-center justify-between mb-5">
                        <h3 class="font-bold text-lg">即将截止的任务</h3>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="p-4 border border-red-200 rounded-lg bg-red-50 hover:border-red-300 transition-colors">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-medium">高中数学必修一题目审核</h4>
                                <span class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs">今天截止</span>
                            </div>
                            <p class="text-sm text-gray-600">需要审核15道高中数学必修一的题目，确保题目质量和知识点匹配。</p>
                            <div class="flex items-center justify-between mt-3">
                                <div class="text-xs text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i> 剩余时间: 8小时30分钟
                                </div>
                                <button class="px-3 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                                    立即处理
                                </button>
                            </div>
                        </div>
                        
                        <div class="p-4 border border-yellow-200 rounded-lg bg-yellow-50 hover:border-yellow-300 transition-colors">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-medium">人教版物理教材更新</h4>
                                <span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded text-xs">明天截止</span>
                            </div>
                            <p class="text-sm text-gray-600">需要更新人教版物理教材的第三章内容，添加新的知识点和例题。</p>
                            <div class="flex items-center justify-between mt-3">
                                <div class="text-xs text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i> 剩余时间: 1天8小时
                                </div>
                                <button class="px-3 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                                    立即处理
                                </button>
                            </div>
                        </div>
                        
                        <div class="p-4 border border-blue-200 rounded-lg bg-blue-50 hover:border-blue-300 transition-colors">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-medium">知识点关联完善</h4>
                                <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">7月5日截止</span>
                            </div>
                            <p class="text-sm text-gray-600">完善高中数学集合与函数部分的知识点关联，建立完整的知识网络。</p>
                            <div class="flex items-center justify-between mt-3">
                                <div class="text-xs text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i> 剩余时间: 2天
                                </div>
                                <button class="px-3 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                                    立即处理
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2025 教材资源管理系统. 保留所有权利.
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 隐私政策
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-envelope-o mr-1"></i> 联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });
        
        // FAQ 折叠功能
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling;
                const icon = question.querySelector('i');
                const faqItem = question.parentElement;
                
                // 关闭其他所有问题
                document.querySelectorAll('.faq-answer').forEach(item => {
                    if (item !== answer) {
                        item.classList.add('hidden');
                        const otherIcon = item.previousElementSibling.querySelector('i');
                        otherIcon.classList.remove('fa-angle-up');
                        otherIcon.classList.add('fa-angle-down');
                        item.parentElement.classList.remove('faq-active');
                    }
                });
                
                // 切换当前问题的显示/隐藏
                answer.classList.toggle('hidden');
                
                // 切换图标旋转
                if (answer.classList.contains('hidden')) {
                    icon.classList.remove('fa-angle-up');
                    icon.classList.add('fa-angle-down');
                    faqItem.classList.remove('faq-active');
                } else {
                    icon.classList.remove('fa-angle-down');
                    icon.classList.add('fa-angle-up');
                    faqItem.classList.add('faq-active');
                }
            });
        });
        
        // 滚动时导航栏效果
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });
        
        // 图表初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 题目类型分布图表
            const ctx = document.getElementById('questionTypeChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['单选题', '多选题', '判断题', '填空题', '解答题', '其他'],
                    datasets: [{
                        data: [45, 15, 10, 12, 15, 3],
                        backgroundColor: [
                            '#165DFF',
                            '#00B42A',
                            '#722ED1',
                            '#FF7D00',
                            '#F53F3F',
                            '#86909C'
                        ],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `${context.label}: ${context.raw}%`;
                                }
                            }
                        }
                    }
                }
            });
        });
        
        // 进度环动画
        document.addEventListener('DOMContentLoaded', function() {
            const circles = document.querySelectorAll('.progress-ring-circle');
            
            circles.forEach(circle => {
                const radius = circle.r.baseVal.value;
                const circumference = radius * 2 * Math.PI;
                
                circle.style.strokeDasharray = `${circumference} ${circumference}`;
                
                // 从0到目标值的动画
                const offset = circle.getAttribute('stroke-dashoffset');
                const targetOffset = parseFloat(offset);
                
                // 重置为0
                circle.style.strokeDashoffset = circumference;
                
                // 触发重排
                circle.getBoundingClientRect();
                
                // 动画到目标值
                setTimeout(() => {
                    circle.style.strokeDashoffset = targetOffset;
                }, 300);
            });
        });
        
        // 为卡片添加渐入动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.card-hover');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
                observer.observe(card);
            });
        });
    </script>
</body>
</html>
                                